<template>
  <header>
    <h2>在线商城后台管理系统</h2>
    <div>
      <img src="@/assets/1jpg.jpg" alt="">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          登录者的账号<el-icon><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup>
import {ArrowDown} from '@element-plus/icons-vue';
</script>

<style scoped>
header{
    width: 100%;
    height: 18vh;
    background-color: #2a2a33;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header h2{
  margin:auto;
  color: yellow;
  padding-right: 55%;
}
header div{
  display: flex;
}
header div img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding-right: 10px;
}
.el-dropdown-link{
  color: white;
  padding-top: 15px;
}
</style>